Accordions on Desktop: When and How to Use手風琴選單
手風琴選單（Accordions）可以簡化內容冗長的頁面並減少滾動，但同時也會降低內容的可見性並增加互動成本。在桌面裝置上，適合在內容較多且使用者不需要頻繁訪問多個手風琴內容時使用。
什麼是手風琴選單？
手風琴選單是一種設計模式，由可點選的標題和隱藏/展開的內容組成。其主要結構包括：
標題（Heading）: 描述性標題，概述手風琴包含的資訊。
圖示（Icon）: 指示手風琴的狀態（展開或摺疊）的符號。
面板（Panel）: 預設隱藏的次要內容，展開後可見。
手風琴選單是一種漸進式披露設計（Progressive Disclosure），讓使用者選擇性地檢視感興趣的內容，支援使用者的控制感和自由度。
手風琴選單的優點
1. 減少頁面雜亂 (Reducing Clutter)
手風琴選單能避免資訊同時展示過多而使頁面顯得凌亂，透過逐步顯示內容降低使用者的認知負擔。
示例: TurboTax 稅務計算器使用手風琴選單將表單分為多個部分，每次只聚焦於當前部分的問題。
2. 縮短頁面長度 (Minimizing Scrolling)
透過摺疊不相關的資訊，手風琴選單縮短頁面長度，保留重要內容在可視區域。
示例: Logitech 產品詳情頁透過手風琴選單展示產品資訊，讓所有關鍵主題可在頁面頂部輕鬆訪問，無需滾動。
3. 提供頁面概覽 (Conveying an Overview of the Page)
手風琴選單像內容目錄一樣，讓使用者快速瞭解頁面包含的主題，並幫助建立頁面的心理模型。
示例: Codecademy 的課程詳情頁使用手風琴選單展示課程大綱，讓使用者高效瀏覽課程主題。
4. 提高掃描效率 (Improving Scannability)
手風琴選單將內容分塊，配合清晰的標題支援使用者快速掃描和理解主要資訊。
示例: 美國移民局（USCIS）頁面使用手風琴選單按步驟展示領事處理流程。
5. 快速訪問內容 (Direct Access to Content)
使用者可直接展開感興趣的部分，無需先瀏覽所有內容。
示例: Google 搜尋結果的“人們也問”部分使用手風琴選單展示問題列表，使用者可快速訪問感興趣的問題。
手風琴選單的可用性問題
1. 資訊獲取的碎片化 (Fragmented Access to Information)
當使用者需要訪問頁面中多個手風琴內容時，逐個展開會顯得繁瑣，且自動摺疊的設計可能限制使用者比較資訊的能力。
示例: 美國社群生活管理局（ACL）的頁面自動摺疊一個手風琴內容後展開另一個，使用者難以同時檢視多個部分的資訊。
2. 增加互動成本 (Increased Interaction Cost)
美國農業部（USDA）：標有“口罩指南”的手風琴式摺疊內容包含有關口罩要求的重要資訊。該內容預設是摺疊並隱藏的，可能會被忽略。在這種情況下，鑑於手風琴式摺疊內容中的資訊簡短，直接在頁面上顯示資訊而不使用手風琴式摺疊會更有效。
3. 降低內容可發現性 (Compromised Discoverability)
隱藏的次要內容可能因標題不夠吸引或描述性不足而被忽略。
示例: USDA 的頁面使用手風琴選單隱藏重要的口罩要求資訊，可能導致使用者錯過關鍵資訊。
4. 可訪問性問題 (Accessibility Considerations)
手風琴選單需要對鍵盤和螢幕閱讀器使用者友好，例如：標題需作為按鈕功能，狀態變化需被螢幕閱讀器讀出，同時隱藏內容需在視覺上和程式上都不可訪問。
5. 列印時的不便 (Difficulty with Printing)
手風琴選單通常未針對列印最佳化，使用者需逐一展開手風琴內容，自動摺疊的設計會增加列印的複雜性。
何時使用及避免使用手風琴選單
使用者僅需要少量資訊時：當使用者只關注頁面中的少部分內容時，手風琴選單可以幫助他們更高效地找到所需資訊。
示例: Delta 的FAQ頁面使用手風琴選單展示問題列表，使用者只需展開感興趣的部分。
任務為邏輯性流程時：手風琴選單適合用於多步驟流程的分步引導，簡化使用者體驗。
示例: Sephora 的結賬頁面使用手風琴選單逐步引導使用者完成每一步操作。結賬頁面利用手風琴式摺疊選單引導使用者完成結賬流程的每一步。只有當使用者在前一步提供了所有必填資訊後，後續的每個手風琴式摺疊選單才會展開，以確保使用者不會遺漏任何必填項。（不幸的是，這些手風琴式摺疊選單缺少一個合適的標識——沒有圖示表明它們可以在原地展開。）
內容獨立性強時：如果每部分內容相互獨立，手風琴選單可幫助使用者快速訪問特定部分。
頁面內容較長且視窗較小時特別是移動裝置上，手風琴選單能有效減少頁面長度並優先顯示重要內容。
達美航空的常見問題解答頁面採用手風琴式佈局，在標題顯示問題，答案則藏在可摺疊面板中，讓使用者能快速瀏覽並只展開感興趣的內容。
避免使用的場景
使用者需要訪問所有內容時：當使用者需要檢視頁面中的所有資訊時，顯示完整內容比使用手風琴選單更高效。示例: Northeastern University 的申請要求頁面，使用者需檢視所有摺疊的內容，顯示全部資訊更為合理。
頁面內容較少時：手風琴選單會讓頁面顯得空曠，可能誤導使用者認為頁面缺乏有價值的資訊。
示例: Minnesota 稅務頁面使用手風琴選單摺疊少量內容，不如直接展示所有資訊更直觀。
內容層級較深時：當內容有多個子級時，手風琴選單可能導致使用者迷失方向，垂直導航或標籤頁更適合。示例: University of Cincinnati 的課程要求頁面使用巢狀手風琴選單，使用者容易喪失方向感。
內容難以總結時：當內容不易歸納為簡潔標題時，手風琴選單可能未能有效傳遞關鍵資訊。
爛番茄：頁面上的節目推薦都包含解釋性文字，難以用簡潔的手風琴標題概括，這樣會丟失重要上下文並降低吸引力。
需要連續閱讀的內容時：手風琴選單會中斷閱讀流暢性，長文章或敘述性內容更適合以滾動頁面的形式呈現。Vox：相比使用需頻繁點選的手風琴式佈局，將長內容呈現在可滾動頁面上更合理，讓使用者能無縫瀏覽內容。
實施手風琴選單時的注意事項
- 標題需準確反映內容：清晰且描述性的標題能提升內容的可發現性和可訪問性。
- 設計需明確可點選性：透過圖示（如加號或箭頭）明確傳達手風琴可展開的提示，避免內容被忽視。
- 允許同時展開多部分內容：提供“全部展開/摺疊”按鈕以提升導航效率，確保使用者能自由掌控內容訪問。
- 避免隱藏關鍵資訊：將重要內容直接展示在頁面上，而不是放入手風琴中。
手風琴選單是一種組織和簡化複雜頁面的有用工具，但在桌面裝置上使用時需權衡其缺點和優點。根據使用者需求和內容特性做出明智的決策，能有效提升使用者體驗並改善頁面導航效率。